<ot-view>
    <div class="row" ng-show="loadingProjects">
        <div class="col-md-12">
            <div class="alert alert-info">
                <span class="ot-loading-indicator"></span>
                Loading the list of projects...
            </div>
        </div>
    </div>
    <div class="row" ng-show="accessStatus == 'login-failed'">
        <div class="col-md-12">
            <div class="alert alert-danger">
                The login has failed. You can <a href ng-click="login()">try again</a>.
            </div>
        </div>
    </div>
    <div class="row" ng-show="accessStatus == 'unauthorised'">
        <div class="col-md-12">
            <div class="alert alert-danger">
                The resource you tried to access has not been granted. You can <a href ng-click="logout()">logout</a>
                and contact the administrator.
            </div>
        </div>
    </div>
    <div class="row" ng-show="accessStatus == 'login-requested'">
        <div class="col-md-12">
            <div class="alert alert-warning">
                Login is required.
            </div>
        </div>
    </div>
    <!-- Favourite branches and projects -->
    <div class="row" ng-if="projectFavourites.length > 0 || favouriteBranches.length > 0">
        <div class="col-md-12">
            <h4>
                <span class="fa fa-star"></span>
                Favourites
            </h4>
            <!-- Favourite branches -->
            <table class="ot-project-branches" ng-if="favouriteBranches.length > 0">
                <tbody>
                <tr ng-repeat="branch in favouriteBranches | orderBy:getBranchTime:true"
                    ng-show="showDisabled || !(branch.disabled || branch.type == 'TEMPLATE_DEFINITION')">
                    <td class="ot-project-branch-name ot-decoration-list"
                        ng-class="{'ot-entity-disabled': branch.disabled}">
                        <span
                                class="fa fa-star ot-command"
                                title="Unsets as favourite"
                                ng-if="branch.links._unfavourite"
                                ng-click="branchUnfavourite(branch)"
                        ></span>
                        <a href="{{branch.project.links._page}}">
                            {{branch.project.name}}
                        </a>
                        /
                        <a href="{{branch.links._page}}">
                            {{branch.name}}
                        </a>
                        <ot-entity-embedded-decorations decorations="branch.decorations"></ot-entity-embedded-decorations>
                        <span
                                ng-show="showDisabled && branch.links._enable"
                                title="Enable the {{branch.name}} branch"
                                ng-click="enableBranch(branch)"
                                class="ot-command ot-command-enable"></span>
                        <span
                                ng-show="showDisabled && branch.links._disable"
                                title="Disable the {{branch.name}} branch"
                                ng-click="disableBranch(branch)"
                                class="ot-command ot-command-disable"></span>
                        <span
                                ng-show="showDisabled && branch.links._delete"
                                title="Delete the {{branch.name}} branch"
                                ng-click="deleteBranch(branch)"
                                class="ot-command ot-command-delete"></span>
                    </td>
                    <td>
                        <div class="ot-project-branch-promotion"
                             ng-if="branch.latestBuild.length > 0">
                            <span class="ot-description">Latest</span>
                            <span class="fa fa-arrow-right"></span>
                            <a href="#/build/{{branch.latestBuild[0].id}}"
                               title="Latest build on this branch">
                                {{branch.latestBuild[0].name}}
                            </a>
                        </div>
                        <div class="ot-project-branch-promotion"
                             ng-if="branch.latestBuild.length == 0">
                                    <span class="ot-description">
                                        <span class="fa fa-ban" title="No build on this branch"></span>
                                        No build
                                    </span>
                        </div>
                        <div class="ot-project-branch-promotion"
                             ng-repeat="promotionLevel in branch.promotionLevels">
                                    <span ng-if="promotionLevel.promotionRuns.length > 0">
                                        <a href="#/promotionLevel/{{promotionLevel.id}}">
                                            <ot-entity-image
                                                    entity="promotionLevel"></ot-entity-image>
                                            {{promotionLevel.name}}
                                        </a>
                                        <span class="ot-project-branch-promotion-build">
                                            <span class="fa fa-arrow-right"></span>
                                            <a href="#/build/{{promotionLevel.promotionRuns[0].build.id}}">{{promotionLevel.promotionRuns[0].build.name}}</a>
                                        </span>
                                    </span>
                            <span ng-if="promotionLevel.promotionRuns.length == 0">
                                        <a href="#/promotionLevel/{{promotionLevel.id}}">
                                            <ot-entity-image
                                                    entity="promotionLevel"></ot-entity-image>
                                            {{promotionLevel.name}}
                                        </a>
                                        <span class="fa fa-arrow-right"></span>
                                        <span class="fa fa-ban"></span>
                                    </span>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
            <!-- Favourite projects -->
            <table class="ot-home-projects" ng-if="projectFavourites.length > 0">
                <tbody>
                <tr ng-repeat="projectFavourite in projectFavourites"
                    ng-show="showDisabled || (!projectFavourite.disabled && !projectFavourite.allBranchesDisabled)">
                    <td ng-class="{'ot-entity-disabled': projectFavourite.disabled}">
                        <span
                                class="fa fa-star ot-command"
                                title="Unsets as favourite"
                                ng-if="projectFavourite.links._unfavourite"
                                ng-click="projectUnfavourite(projectFavourite)"
                        ></span>
                        <a href="#/project/{{projectFavourite.id}}">
                            {{projectFavourite.name}}
                        </a>
                        <ot-entity-embedded-decorations decorations="projectFavourite.decorations"></ot-entity-embedded-decorations>
                    </td>
                    <td>
                        <div class="ot-home-branch" ng-if="projectFavourite.branches.length == 0">
                            <span class="ot-description">
                                <span class="fa fa-ban" title="No branch on this project"></span>
                                No branch
                            </span>
                        </div>
                        <div class="ot-home-branch"
                             ng-repeat="branch in projectFavourite.branches"
                             ng-show="showDisabled || !(branch.disabled || branch.type == 'TEMPLATE_DEFINITION')">
                            <span class="ot-home-branch-name ot-decoration-list"
                                  ng-class="{'ot-entity-disabled': branch.disabled}">
                                <a href="#/branch/{{branch.id}}">{{branch.name}}</a>
                                <ot-entity-embedded-decorations decorations="branch.decorations"></ot-entity-embedded-decorations>
                            </span>
                            <span ng-if="branch.latestPromotions.length > 0" class="ot-home-branch-promotion">
                                <a href="#/promotionLevel/{{branch.latestPromotions[0].promotionRuns[0].promotionLevel.id}}">
                                    <ot-entity-image entity="branch.latestPromotions[0].promotionRuns[0].promotionLevel"></ot-entity-image>
                                    {{branch.latestPromotions[0].promotionRuns[0].promotionLevel.name}}
                                </a>
                                <span class="fa fa-arrow-right"></span>
                                <a href="#/build/{{branch.latestPromotions[0].id}}">{{branch.latestPromotions[0].name}}</a>
                            </span>
                            <span ng-if="branch.latestPromotions.length == 0 && branch.latestBuild.length > 0" class="ot-home-branch-promotion">
                                <span class="ot-description">Latest</span>
                                <span class="fa fa-arrow-right"></span>
                                <a href="#/build/{{branch.latestBuild[0].id}}">{{branch.latestBuild[0].name}}</a>
                            </span>
                            <span ng-if="branch.latestPromotions.length == 0 && branch.latestBuild.length == 0" class="ot-home-branch-promotion">
                                <span class="fa fa-ban"></span>
                                <span class="ot-description">
                                    No build yet
                                </span>
                            </span>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <!-- When no project -->
    <div class="row" ng-show="accessStatus == 'ok' && projectsData.projects.length == 0">
        <div class="col-md-12">
            <div class="alert alert-info">
                No project in the list.
                <span ng-if="projectsData.userRootActions.projectCreate">
                    Create a new project by using this
                    <a href ng-click="createProject()">link</a>.
                </span>
            </div>
        </div>
    </div>
    <!-- List of projects -->
    <div class="row" ng-if="projectsData.projects.length > 0">
        <div class="col-md-12">
            <div class="row" ng-show="projectFavourites.length > 0 || favouriteBranches.length > 0">
                <div class="col-md-12">
                    <h4>
                        <span class="fa fa-book"></span>
                        All projects
                    </h4>
                </div>
            </div>
            <!-- All project filters -->
            <div class="row">
                <div class="col-md-12 ot-home-header">
                    <!-- Name filter -->
                    <div class="ot-home-filter input-group col-md-3">
                        <input class="form-control"
                               type="text"
                               ng-model="projectFilter.name"
                               placeholder="Filter on project names"/>
                        <span class="input-group-addon"><span class="fa fa-search"></span></span>
                    </div>
                    <!-- Label filter -->
                    <script type="text/ng-template" id="projectFilterLabelTypeAheadTemplate.html">
                        <a>
                            <span title="{{match.model.description}}"
                                  class="ot-project-label-box">
                                <span class="ot-project-label-box-square"
                                      ng-style="{
                                        'background-color': match.model.color + ' !important;'
                                      }"></span>
                                <span class="ot-project-label-box-text">
                                    <span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>
                                </span>
                            </span>
                        </a>
                    </script>
                    <div class="col-md-3 input-group" ng-if="projectsData.labels.length > 0">
                        <input type="text" class="form-control"
                               placeholder="Label filter"
                               ng-model="projectFilter.label"
                               typeahead="label as formatLabel(label) for label in typeAheadFilterLabels($viewValue)"
                               typeahead-editable="false"
                               typeahead-template-url="projectFilterLabelTypeAheadTemplate.html"
                        />
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Label <span class="caret"></span></button>
                            <ul class="dropdown-menu">
                                <li class="ot-action">
                                    <a ng-click="projectFilterClearLabel()">
                                        <i>Clear</i>
                                    </a>
                                </li>
                                <li class="ot-action" ng-repeat="label in projectsData.labels">
                                    <a ng-click="projectFilterSelectLabel(label)">
                                        <ot-project-label label="label" color-box="true"></ot-project-label>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!-- List of projects -->
            <div class="row">
                <div class="col-md-3"
                     ng-repeat="project in projectsData.projects | filter:projectFilterFn"
                     ng-show="showDisabled || !project.disabled">
                    <div class="ot-home-project"
                         ng-class="{'ot-entity-disabled': project.disabled}">
                        <span
                                class="fa fa-star-o ot-command"
                                title="Sets as favourite"
                                ng-if="project.links._favourite"
                                ng-click="projectFavourite(project)"
                        ></span>
                        <span
                                class="fa fa-star ot-action"
                                style="color: yellow;"
                                title="Unsets as favourite"
                                ng-if="project.links._unfavourite"
                                ng-click="projectUnfavourite(project)"
                        ></span>
                        <a href="#/project/{{project.id}}">
                            {{project.name}}
                        </a>
                        <ot-entity-embedded-decorations decorations="project.decorations"></ot-entity-embedded-decorations>
                        <span class="ot-project-label-container ot-project-label-container-div">
                            <ot-project-label label="label" ng-repeat="label in project.labels" action="projectFilterSelectLabel(label)"></ot-project-label>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</ot-view>